<template>
  <view class="container">
    <view class="header">
      <text class="title">处方详情</text>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">处方状态：</text>
        <text class="value">待取药</text>
      </view>
      <view class="list-item">
        <text class="label">医院：</text>
        <text class="value">长沙市中心医院</text>
      </view>
      <view class="list-item">
        <text class="label">处方编号：</text>
        <text class="value">4471162</text>
      </view>
      <view class="list-item">
        <text class="label">开具日期：</text>
        <text class="value">2022-09-23</text>
      </view>
      <view class="list-item">
        <text class="label">临床诊断：</text>
        <text class="value">腹痛</text>
      </view>
    </view>
    <view class="prescription">
      <text class="section-title">Rp</text>
      <view class="list-item">
        <text class="med-name">卡培他滨片</text>
        <text class="med-dose">0.15*12片</text>
        <text class="med-usage">口服一次性，每次5mg</text>
      </view>
      <view class="list-item">
        <text class="med-name">罗红霉素胶囊</text>
        <text class="med-dose">150mg*10粒/盒</text>
        <text class="med-usage">口服，每天2次，每次1粒</text>
      </view>
    </view>
    <view class="footer">
      <view class="list-item">
        <text class="label">处方医师：</text>
        <text class="value">张涨涨</text>
      </view>
      <view class="list-item">
        <text class="label">审核医师：</text>
        <text class="value">水水水</text>
      </view>
      <view class="list-item">
        <text class="label">就诊科室：</text>
        <text class="value">内科</text>
      </view>
      <view class="list-item">
        <text class="label">参考金额：</text>
        <text class="value">¥38.00</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 这里可以添加更多数据，如从API获取
    };
  }
};
</script>

<style>
.container {
  padding: 16px;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.content,
.prescription,
.footer {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.label {
  color: #888888;
}

.value {
  color: #333333;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.med-name {
  font-size: 16px;
  color: #333333;
}

.med-dose,
.med-usage {
  font-size: 14px;
  color: #666666;
}
</style>
